<template>
    <drawer-tabs-container>
        <div class="project-setting">
            <Form ref="formSystem" :model="formSystem" :label-width="110" @submit.native.prevent>
                <Tree :data="data5" :render="renderContent" class="demo-tree-render"></Tree>
            </Form>
        </div>
    </drawer-tabs-container>
</template>

<style lang="scss" scoped>

</style>
<script>
    import DrawerTabsContainer from "../DrawerTabsContainer";
    import { resolveComponent } from 'vue'
    export default {
        name: 'ProjectSetting',
        components: {DrawerTabsContainer},
        props: {
            projectid: {
                default: 0
            },
            canload: {
                type: Boolean,
                default: true
            },
        },
        data () {
            return {
                loadYet: false,

                loadIng: 0,

                formSystem: {},
                data5: [
                    {
                        title: 'parent 1',
                        expand: true,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-folder-outline'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.title)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px'
                                    }
                                }, [
                                    h('Button', {
                                        props: Object.assign({}, this.buttonProps, {
                                            icon: 'ios-add',
                                            type: 'primary'
                                        }),
                                        style: {
                                            width: '64px'
                                        },
                                        on: {
                                            click: () => { this.append(data) }
                                        }
                                    })
                                ])
                            ]);
                        },
                        children: [
                            {
                                title: 'child 1-1',
                                expand: true,
                                children: [
                                    {
                                        title: 'leaf 1-1-1',
                                        expand: true
                                    },
                                    {
                                        title: 'leaf 1-1-2',
                                        expand: true
                                    }
                                ]
                            },
                            {
                                title: 'child 1-2',
                                expand: true,
                                children: [
                                    {
                                        title: 'leaf 1-2-1',
                                        expand: true
                                    },
                                    {
                                        title: 'leaf 1-2-1',
                                        expand: true
                                    }
                                ]
                            }
                        ]
                    }
                ],
                buttonProps: {
                    type: 'default',
                    size: 'small',
                }
            }
        },
        mounted() {
           this.getData()
        },

        watch: {
            projectid() {
                if (this.loadYet) {
             
                }
            },
            canload(val) {
                if (val && !this.loadYet) {
                    this.loadYet = true;
              
                }
            }
        },

        methods: {
            DealData  (
                d, // 目标数据
                dataWork, // 处理数据函数
                parentKey = 'pid', // 匹配父节点字段key
                currentKey = 'id' // 匹配当前节点key
                ) {
                    let instanse = JSON.parse(JSON.stringify(d))
                    let map = {}
                    for (let i = 0; i < instanse.length; i++) {
                        delete instanse[i].children
                        if (instanse[i][currentKey]) {
                        map[instanse[i][currentKey]] = instanse[i]
                        }
                    }
                    let treeData = []
                    for (let i = 0; i < instanse.length; i++) {
                        let child = instanse[i]
                        dataWork && dataWork(child)
                        let mapItem = map[child[parentKey]]
                        if (mapItem) {
                        (mapItem.children || (mapItem.children = [])).push(child)
                        } else {
                        treeData.push(child)
                        }
                    }
                    return treeData
},
            getData(){
                $A.apiAjax({
                    url: 'project/step/list?projectid=' +this.projectid,
                  
                    complete: () => {
                     
                    },
                    success: (res) => {
                       this.data5= this.DealData(res.data)
                    }
                });
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-add'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.append(data) }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-remove'
                            }),
                            on: {
                                click: () => { this.remove(root, node, data) }
                            }
                        })
                    ])
                ]);
            },
            append (data) {
                const children = data.children || [];
                children.push({
                    title: 'appended node',
                    expand: true
                });
                this.$set(data, 'children', children);
            },
            remove (root, node, data) {
                const parentKey = root.find(el => el === node).parent;
                const parent = root.find(el => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);
                parent.children.splice(index, 1);
            }
        }
        }
    
</script>
